<template>
  <basic-container>
    <section class="haruyuki-bg-color-white">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-tickets"></i><span class="haruyuki-ml-6">基本信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="24">
                <span class="wordBreak">商户编号：{{ orderInfo.rpiNo }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">商户名称：{{ orderInfo.rpiName }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">服务商编号：{{ orderInfo.serviceNo }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">服务商名称：{{ orderInfo.serviceName }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">机构编号：{{ orderInfo.orgNo }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">机构名称：{{ orderInfo.orgName }}</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="24">
                <span class="wordBreak">活动编号：{{ orderInfo.merchantActiveCode }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">活动名称：{{ orderInfo.merchantActiveName }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">活动类型：{{ orderInfo.mealActiveTypeName }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">参与状态：{{ orderInfo.isRefundName }}</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="24">
                <span class="wordBreak">付款金额：{{exhibition(orderInfo.payAmt) }} 元</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">付款人ID：{{ orderInfo.payOpenid }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">订单号：{{ orderInfo.orderCode }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">官方订单号：{{ orderInfo.payOrderCode }}</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">付款状态：{{ orderInfo.orderStatusName }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-tickets"></i><span class="haruyuki-ml-6">套餐信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span class="wordBreak">套餐类型：{{ orderInfo.mealTypeName }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="24">
                <span class="wordBreak">套餐应退还金额：{{ exhibition(orderInfo.ifRefundAmt) }} 元</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">套餐应返现金额：{{ exhibition(orderInfo.ifReturnAmt) }} 元</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="24">
                <span class="wordBreak">实际可退金额：{{ exhibition(orderInfo.realIfRefundAmt) }} 元</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">实际可返金额：{{ exhibition(orderInfo.realIfReturnAmt) }} 元</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="24">
                <span class="wordBreak">已退金额：{{ exhibition(orderInfo.refundAmt) }} 元</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">已返金额：{{ exhibition(orderInfo.returnAmt) }} 元</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16 haruyuki-flex-space-between" style="width:100%">
          <div>
            <i class="el-icon-tickets"></i><span class="haruyuki-ml-6">金额信息</span>
          </div>
          <div>
            <el-button type="primary" size="small" @click="kcfwfShow = true">扣除服务费记录</el-button>
          </div>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="24">
                <span class="wordBreak">设置退款不扣服务商钱：{{ exhibition(orderInfo.setDeductDay) }} 天</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">设置服务费：{{ exhibition(orderInfo.setServiceCharge) }} 元</span>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="24">
                <span class="wordBreak"> 实际扣服务费天数 ：{{ exhibition(orderInfo.deductDay) }} 元</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak"> 实际扣除服务费：{{ exhibition(orderInfo.deductServiceCharge) }} 元</span>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="24">
                <span class="wordBreak"> 可提余额：{{ exhibition(orderInfo.balance) }} 元</span>
              </el-col>
              <el-col :span="24">
                <span class="wordBreak">已提现金额：{{ exhibition(orderInfo.withdrawAmt) }} 元</span>
              </el-col>
            </el-row>
          </el-col>
          
        </el-row>
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-tickets"></i><span class="haruyuki-ml-6">订单参与活动</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <span v-for="orderActive in orderInfo.orderActiveList" :key="orderActive.activeCode" style="margin-right:20px">
          <el-button type="text" @click="clickOrderActive(orderActive)">{{orderActive.activeName}}</el-button>
        </span>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-tickets"></i><span class="haruyuki-ml-6">商品信息</span>
        </div>
      </div>
      <avue-crud :option="option" :data="orderInfo.orderProductList" ref="crud">
        <template slot-scope="{row}" slot="logo">
          <el-image style="width:40px;height:40px;margin-left:20px;" :src="row.logo" @click="getqrCodeUrl(row.logo)"></el-image>
        </template>
      </avue-crud>
    </section>

    <!-- 图片预览 -->
    <el-image-viewer
      style="z-index: 2048"
      v-if="imgShow"
      :on-close="() => { imgShow = false; }"
      :url-list="[imgUrlList]"
    ></el-image-viewer>

    <!-- 活动 -->
    <el-dialog
      class="avue-dialog"
      :title="'活动：'+dialogText"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <activity-form :inputForm="activityForm" method="view" ref="toActivityForm" />
    </el-dialog>
    
    <!-- 扣除服务费 -->
    <el-dialog
      class="avue-dialog"
      title="扣除服务费记录"
      append-to-body
      :visible.sync="kcfwfShow"
      width="400px"
    >
      <avue-crud :option="kcfwfOption" :data="orderInfo.deductRecordList" ref="crud"></avue-crud>
    </el-dialog>
  </basic-container>
</template>
<script>
import { getDetail } from "@/api/rb-oem/depositActivity/paymentDetails";
import activityForm from "@/views/rb-oem/activity/form/activity_form";

export default {
  components: {
    activityForm
  },
  data() {
    return {
      kcfwfShow:false,
      dialogVisible:false,
      dialogText:'',
      activityForm:{},
      imgShow:false,
      imgUrlList:[],
      orderCode: '', //订单编号
      orderInfo: {
        orderProductList: [],
        deductRecordList: []
      }, //订单信息
      // str----子订单列表
      option: {
        // height: "calc(50vh - 50px)",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        searchMenuSpan: 24,
        columnBtn: false,
        menu:false,
        menuWidth: 100,
        refreshBtn: false,
        searchBtn: false,
        selectClearBtn: false,
        indexLabel: '序号',
        selection: false,
        column: [
          {
            label: '商品编号',
            prop: 'productCode',
            type: 'input',
            overHidden: true,
            minWidth: 250
          },
          {
            label: '商品名称',
            prop: 'productName',
            type: 'input',
            overHidden: true,
            minWidth: 250
          },
          {
            label: '商品型号',
            prop: 'productType',
            type: 'input',
            overHidden: true,
            minWidth: 130
          },
          {
            label: '商品logo',
            prop: 'logo',
            type: 'input',
            overHidden: true,
            width: 100
          },
          {
            label: '单价',
            prop: 'price',
            type: 'input',
            overHidden: true,
            minWidth: 130
          },
          {
            label: '数量',
            prop: 'num',
            type: 'input',
            overHidden: true,
            minWidth: 130
          },
          {
            label: '商品总价格',
            prop: 'totalPrice',
            type: 'input',
            overHidden: true,
            minWidth: 130
          },
          {
            label: '订单号',
            prop: 'orderCode',
            type: 'input',
            overHidden: true,
            minWidth: 130
          },
          {
            label: '是否可退',
            prop: 'ifRefundName',
            type: 'input',
            width: 200
          },
          {
            label: '退还金额',
            prop: 'ifRefundAmt',
            type: 'input',
            width: 200
          },
          {
            label: '是否可返',
            prop: 'ifReturnName',
            type: 'input',
            minWidth: 180,
            overHidden: true
          },
          {
            label: '返现金额',
            prop: 'ifReturnAmt',
            type: 'input',
            width: 200
          },
          {
            label: '是否允许复购',
            prop: 'isRepurchaseName',
            type: 'input',
            overHidden: true,
            minWidth: 150
          }
        ]
      },
      // end----子订单列表

      kcfwfOption: {
        // height: "calc(50vh - 50px)",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        searchMenuSpan: 24,
        columnBtn: false,
        menu:false,
        menuWidth: 100,
        refreshBtn: false,
        searchBtn: false,
        selectClearBtn: false,
        indexLabel: '序号',
        selection: false,
        column: [
          {
            label: '扣除服务费',
            prop: 'deductServiceCharge',
            type: 'input',
            overHidden: true
          },
          {
            label: '扣除日期',
            prop: 'deductTime',
            type: 'input',
            overHidden: true
          }
        ]
      }
    }
  },
  computed: {
    exhibition() {
      return (val) => {
        if (val == '' || val == '-1' || val == '0.00') {
          return (val = 0)
        } else {
          return val
        }
      }
    },
    // 交易状态
    rptPayStateType() {
      return (row) => {
        if (row.rptPayState == 0) {
          return '#E6A23C' //未支付
        } else if (row.rptPayState == 1 && row.rptIsRefund !== 0) {
          return '#6463bf' //支付成功（已退款）
        } else if (row.rptPayState == 1) {
          return '#67C23A' //支付成功
        } else if (row.rptPayState == 2) {
          return '#909399' //支付失败
        } else if (row.rptPayState == 3) {
          return '#909399' //取消支付
        } else if (row.rptPayState == 4) {
          return '#909399' //退款中
        } else if (row.rptPayState == 5) {
          return '#2fdeebf2' //已退款
        } else if (row.rptPayState == 6) {
          return '#909399' //退款失败
        } else {
          return '#909399'
        }
      }
    }
  },
  created() {
    this.infoData()
  },
  methods: {
    // 打卡活动
    clickOrderActive(row){
      this.activityForm = row;
      this.dialogText=row.activeName;
      this.dialogVisible=true;
    },
    /* 预览图片 */
    getqrCodeUrl(item) {
      this.imgUrlList[0] = item;
      this.imgShow = true;
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      this.orderCode = this.$route.query.orderCode
      getDetail(this.orderCode ).then((res) => {
        this.orderInfo = res.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body{
  margin-bottom: 0;
  padding: 10px;
}
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
}

/deep/ .avue-crud__menu {
  display: none !important;
}

.wordBreak {
  word-break: break-word;
}

/deep/ .el-tag--dark.el-tag--success {
  border: none !important;
}

.centers {
  text-align: center;
}

::v-deep .el-form--inline .el-form-item__content {
  width: calc(100% - 120px);
}

::v-deep .el-form--inline .el-form-item {
  width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>